<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>

<h1>the ajax-01 page</h1>
<fieldset>
    <legend>ajax 异步get请求</legend>
    <button onclick="doAjaxStart()">ajax get request</button>
    <span id="result">data is loading</span>
</fieldset>

<script>
    function doAjaxStart() {
        /* 创建XML对象(XmlHttpRequest) ajax应用得入口对象 */
        let xhr = new XMLHttpRequest();
        /* 在XML对象上注册状态监听 (拿到服务端响应结果后更新到result位置) */
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("result").innerHTML = xhr.responseText;
            }
        }
        /* 与服务端建立连接 (请求方式 url 异步) */
        xhr.open("GET", "http://localhost/doAjaxStart", true);
        /* 向服务端发送请求 */
        xhr.send(null);
    }
</script>

</body>
</html>